<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船货信息" name="1">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input
									v-model="formData.shipvoyageName"
									size="mini"
									placeholder="请输入船名"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船代" prop="customerName" class="top">
								<el-input
									v-model="formData.customerName"
									size="mini"
									placeholder="请输入船代"
									disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="泊位" prop="berthNo" class="top">
								<el-input
									v-model="formData.berthNo"
									size="mini"
									placeholder="请输入泊位"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="靠泊时间" prop="berthTime" class="top">
								<el-input
									v-model="formData.berthTime"
									size="mini"
									placeholder="请输入靠泊时间"
									disabled
								/>
							</el-form-item>
						</el-col>		
			<el-col :span="24">
				<el-form-item label="" prop="shipperName" class="top" style="margin-top:20px;">
					<BaseTable
						:data="formData.yardTicketListSum"
						:columns="tableColumn"
						:tableHeight="tableHeight"
						:pagination="false"
					></BaseTable>
				</el-form-item>
			</el-col>
			</el-row>
			</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
export default {
  name: 'settlement',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array
    }
  },
  data() {
    return {
      activeNames: ['1', '2'], // 折叠面板
      tabActiveName: 'first', // tabs切换
      formData: {
        shipvoyageName: '',
        customerName: '',
        berthNo: '',
        berthTime: '',
        yardTicketListSum: [] // 作业明细
      }, // from
      tableColumn: [ // table表头
        { prop: 'processName', label: '作业内容' },
        {
          prop: 'checkNumber',
          label: '作业量',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.checkNumber,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.formData.yardTicketListSum[params.row.index], 'checkNumber', e)
                    }
                  }
                })
              ])
          }
        }
      ],
      selectRow: []
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 240
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
@import "../component/index.less";
[v-cloak] {
	display: none;
}
</style>
